import { useAtomValue, useSetAtom } from 'jotai';

import { ReactComponent as Chinese } from '@/assets/svg/chinese.svg';
import { ReactComponent as English } from '@/assets/svg/english.svg';
import localeProxy, { SupportLanguage } from '@/store/localeStore';

import styles from '../index.module.scss';

interface LangProps {
  className?: string;
  style?: object;
}

const SwitchLang: React.FC<LangProps> = props => {
  const className = props?.className ? props.className : '';
  const localeStore = useAtomValue<SupportLanguage>(localeProxy);
  const setLocaleStore = useSetAtom(localeProxy);

  const switchLanguage = () => {
    setLocaleStore((pre: SupportLanguage) => {
      const changeTo = pre.language === 'zh-CN' ? 'en-US' : 'zh-CN';
      return { language: changeTo };
    });
  };

  return (
    <div
      style={props?.style}
      className={`${styles.language} ${className}`}
      onClick={switchLanguage}
    >
      {localeStore.language === 'en-US' ? (
        <English className="inline w-5 cursor-pointer" />
      ) : (
        <Chinese className="inline w-5 cursor-pointer" />
      )}
    </div>
  );
};

export default SwitchLang;
